/*
 * @Author: Lin Hongwei
 * @Date: 2022-09-07 20:57:57
 * @LastEditTime: 2022-10-31 19:13:14
 * @LastEditors: Lin Hongwei
 * @email: 1365755396@qq.com
 * @CSDN: https://blog.csdn.net/weixin_45429409
 * @Description: 搜索组件
 */
import { Form, Input, Select } from "antd";
import { IdSelect } from "../../components/id-select";
import { UserSelect } from "../../components/user-select";
import { Project } from "../../types/project";
import { User } from "../../types/user";
interface SearchPanelProps {
  // param: Pick<Project,'name'|'personId'>;
  param: Partial<Pick<Project, "name" | "personId">>; //转化则personId可以为undefined
  // param: {
  //   name: string;
  //   personId: string;
  // };
  //不能通过直接点的方式
  setParam: (param: SearchPanelProps["param"]) => void;
  users: User[];
}

export const SearchPanel = ({ param, setParam, users }: SearchPanelProps) => {
  return (
    <Form style={{ marginBottom: "2rem" }} layout="inline">
      <Form.Item>
        <Input
          type="text"
          value={param.name}
          onChange={(event) => {
            setParam({
              ...param,
              name: event.target.value,
            });
          }}
        />
      </Form.Item>
      <Form.Item>
        <IdSelect
          options={users}
          defaultName="负责人"
          value={param.personId}
          onChange={(value) => {
            setParam({
              ...param,
              personId: value,
            });
          }}
        />
        {/* <UserSelect options={users} defaultName="负责人" value={param.personId} onChange={(value) => {
          setParam({
            ...param,
            personId: value,
          });
        }} /> */}
        {/* <Select
          value={param.personId}
          onChange={(value) => {
            setParam({
              ...param,
              personId: value,
            });
          }}
        >
          <Select.Option value={""}>负责人</Select.Option>
          {users.map((item) => (
            <Select.Option value={`${item.id}`} key={item.id}>
              {item.name}
            </Select.Option>
          ))}
        </Select> */}
      </Form.Item>
    </Form>
  );
};
